import React, { Component } from 'react';
import { Message, Dialog, Button, Form, Input, Field, NumberPicker, Switch, TreeSelect, Select } from '@alifd/next';
import { insert } from '../../../../api/Role';
import { Forest } from '../../../../libs/Tree';
import '../RoleTable.scss';
import eventProxy from '../../../../libs/eventProxy';

const FormItem = Form.Item;

export default class AddDialog extends Component {
  static displayName = 'AddDialog';

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.field = new Field(this);
  }
  
 componentWillMount() {
   this.oth_fields = {
    roleType: '1',
  };
 }

  handleSubmit = () => {
    this.field.validate((errors, values) => {
      if (errors) {
        console.log('Errors in form!!!');
        return;
      }
      values.roleType = this.oth_fields.roleType;
     insert(values).then((response) => {
       const data = response.data;
       if (data.code === 200){
         Message.success('添加成功');
         this.setState({
           visible: false,
         });
         eventProxy.trigger('role:list:change');
       } else {
         Message.warning('添加失败');
       }
     });
    });
  };

  onOpen = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onSelectChange = (value) => {
      this.oth_fields.roleType = value;
  }

  render() {
    const init = this.field.init;
    const formItemLayout = {
      labelCol: {
        fixedSpan: 6,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const Option = Select.Option;
    const roleType = this.oth_fields.roleType;
    return (
      <div style={styles.editDialog}>
        <Button type="primary" onClick={this.onOpen}>
        新增角色
        </Button>
        <Dialog
          style={{ width: 640 }}
          visible={this.state.visible}
          onOk={this.handleSubmit}
          closeable="esc,mask,close"
          onCancel={this.onClose}
          onClose={this.onClose}
          title="新增"
        >
          <Form field={this.field} {...formItemLayout}>
            <FormItem label="角色名称：" >
              <Input
                {...init('name', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>

            <FormItem label="角色英文名：" >
              <Input
                {...init('enName', {
                  rules: [{ required: true, message: '必填选项' }],
                })}
              />
            </FormItem>
            <FormItem label="角色类型：" {...formItemLayout} >
              <Select id="basic-demo" onChange={this.onSelectChange} defaultValue={roleType}>
                <Option value="0">超级管理员</Option>
                <Option value="1">普通管理员</Option>
              </Select>
            </FormItem>
            <FormItem label="备注：" >
              <Input
                {...init('remarks')}
              />
            </FormItem>
          </Form>
        </Dialog>
      </div>
    );
  }
}

const styles = {
  editDialog: {
    display: 'inline-block',
    marginRight: '5px',
  },
};
